<template>
  <div class="home">
    <div v-if="token" class="content">
      <!-- 长方形标题 -->
      <div v-for="(item, i) in temFilter" :key="i" class="title-cart">
        <div class="cart-title-font">
          <div>{{ item.parent.name }}</div>
        </div>
        <n-scrollbar x-scrollable>
          <div class="card-box">
            <div
              v-for="(element, k) in item.models"
              :key="k"
              class="cart-item-rectangle"
              :style="{ backgroundColor: colorArray[i % colorArray.length] }"
              @click="openPageFun(element)"
            >
              <img
                class="cart-icon"
                v-if="element.picture"
                :src="element.picture"
                alt=""
              />
              <icons v-else class="cart-icon" name="letterA" />
              <div class="cart-txt">{{ element.modelName }}</div>
            </div>
          </div>
        </n-scrollbar>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useAppStore } from "@/store/modules/user";
import { tmpStore } from "@/store/modules/template";
import { GetPageModelByToken, GetModuleType } from "@/server";
const templateData = ref([]) as any;
const router = useRouter();
const store = useAppStore();
const tempplate = tmpStore();
const token = computed(() => store.token);
const modelId = ref(0); //模块id
const colorArray = ["#2F9832", "#01C0E4", "#EE9708", "#02A8AE"];
const temFilter = computed(() => {
  const list = templateData.value
    .map((e: any) => {
      const parent = e.parent;
      const child = e.models.filter((c: any) => {
        if (c.isVisibleHomePage) {
          return c;
        }
      });
      return {
        parent: parent,
        models: child,
      };
    })
    .filter((e: any) => e.parent.isVisibleHomePage);
  return list;
});
/**
 * @description: 获取模块应用类型列表
 * @return {*}
 * @author: cool panda
 */
const openPageFun = async (item: any) => {
  let path = item.moduleType;
  if (item.applicationType === "DataSheet" && path !== "B1") {
    path = "B2";
  }
  let url = path + "/" + item.id;
  if (path === "B2") {
    const houzui = item.remark ? "/" + item.remark : "/1";
    url = url + "/" + item.moduleType + houzui;
  }
  openPage(url);
};
const openPage = (path: string) => {
  if (path === "module") {
    if (modelId.value > 0) {
      router.push("/module/" + modelId.value);
    } else {
      router.push("/templateManage");
    }
  } else {
    router.push("/" + path);
  }
};
/**
 * @description: 获取模版信息
 * @return {*}
 * @author: cool panda
 */
const GetPageModelByTokenFun = async () => {
  const res: any = await GetPageModelByToken({});
  if (res.result.isSuccess) {
    templateData.value = res.result.result;
    if (res.result.result.length > 0) {
      modelId.value = res.result.result[0].parent.moduleId;
    } else {
      modelId.value = 0;
    }
    tempplate.setMnue(res.result.result);
  } else {
    store.error(res.result.message); // 错误提示
  }
};
onMounted(() => {
  GetPageModelByTokenFun();
});
</script>
<style lang="less" scoped>
.home {
  width: 100%;
  height: 100%;
  color: #fff;

  .content {
    width: 100%;
    padding: 0.85rem 1rem;
    // margin-left: 107px;
    .cart-title-font {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.875rem;
      height: 1rem;
      line-height: 1rem;
      margin-bottom: 1rem;
    }
    .card-box {
      display: flex;
    }
    // 正方形卡片
    .cart-item-square {
      width: 200px;
      height: 200px;
      margin-bottom: 2rem;
    }

    // 长方形卡片
    .cart-item-rectangle {
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      position: relative;
      width: 12.7rem;
      height: 6.875rem;
      margin-bottom: 2rem;
      margin-right: 1rem;
    }

    .cart-icon {
      width: 2.625rem;
      height: 2.625rem;
      object-fit: contain;
    }

    .cart-txt {
      position: absolute;
      bottom: 0.6rem;
      left: 0.6rem;
      font-size: 0.6rem;
      text-align: left;
    }

    .bg-green {
      background: #2f9832;
    }

    .bg-yellow {
      background: #ee9708;
    }

    .bg-blue {
      background: #01c0e4;
    }
  }
}
</style>
